<template>
  <template v-if="moment.imgList.length == 1">
    <img class="onlyOne" :src="moment.imgList[0]" />
  </template>
  <template v-else>
    <div v-for="(img, index) in computedImgList" :key="index" class="imgWrapper">
      <img class="many" :src="img + ''" />
      <div class="overMore" v-if="moment.imgList.length > 9 && index===8">更多</div>
    </div>
  </template>
</template>
<script lang="ts" setup>
import { inject, computed } from 'vue'
const moment = inject('moment', {})
/**
 * Computes the list of images to be displayed, limiting it to a maximum of 8 items.
 * If the original list has more than 9 items, it slices the list to the first 8 items.
 * If the original list has 9 or fewer items, it returns the original list.
 * 
 * @returns {Array} The list of images to be displayed.
 */
const computedImgList = computed(() => {
  const imgList = moment.imgList.split(";")
  return imgList.length > 9 ? imgList.slice(0, 8) : imgList
})
</script>
<style lang="less" scoped>
.onlyOne {
  width: 328px !important;
}
.imgWrapper {
  width: 33%;
    aspect-ratio: 1/1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
  img {
    max-width: 100%;
  }
  .overMore {
    width: 100%;
    height: 100%;
    background-color: #0000001c;
    color: white;
  }
  &.many {
    width: 33%;
  }
}
</style>
